<template>
	<view class="u-container over-hidden">
		<view class="flex top" :style="[{paddingTop: `calc(${StatusBar}px + 44rpx)`}]">
			<image src="../../../static/images/head-img2.png" class="head-img flex-shrink" mode="aspectFill"></image>
			<view class="flex flex-column justify-between flex-1 over-hidden">
				<view class="username text-ellipsis">{{username}}</view>
				<view class="fs-28">所属部门：维修部</view>
			</view>
		</view>
		<view style="height: 30rpx;background-color: #f3f5f8;"></view>
		<!-- <view class="flex box">
			<view class="flex flex-column align-center flex-1">
				<image src="../../../static/images/icon3.png" class="icon"></image>
				<text class="fs-28 margin-t-32">我的消息</text>
			</view>
			<view class="flex flex-column align-center flex-1">
				<image src="../../../static/images/icon3.png" class="icon"></image>
				<text class="fs-28 margin-t-32">后台系统</text>
			</view>
			<view class="flex flex-column align-center flex-1">
				<image src="../../../static/images/icon3.png" class="icon"></image>
				<text class="fs-28 margin-t-32">设置</text>
			</view>
		</view> -->
		<!-- <view style="height: 30rpx;background-color: #f3f5f8;"></view> -->
		<!-- <view class="flex align-center justify-between padding-32 border-b-e4">
			<view class="fs-28">法律法规</view>
			<image src="../../../static/images/arrow-r.png" style="width: 32rpx;" mode="widthFix"></image>
		</view>
		<view class="flex align-center justify-between padding-32 border-b-e4">
			<view class="fs-28">联系客服</view>
			<image src="../../../static/images/arrow-r.png" style="width: 32rpx;" mode="widthFix"></image>
		</view>
		<view class="flex align-center justify-between padding-32 border-b-e4">
			<view class="fs-28">关于</view>
			<image src="../../../static/images/arrow-r.png" style="width: 32rpx;" mode="widthFix"></image>
		</view> -->
		<view class="flex align-center justify-between padding-32 border-b-e4" @click="navTo(`/pages/tab/user/system`)">
			<view class="fs-28">后台系统</view>
			<!-- <image src="../../../static/images/arrow-r.png" style="width: 32rpx;" mode="widthFix"></image> -->
		</view>
		<view class="bg-f logout">
			<view class="btn" @click="logOut">退出登录</view>
		</view>
		
		<u-tabbar :curPage="4"></u-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			username: global.userInfo.username
		}
	},
	onLoad() {
		
	},
	methods: {
		navTo(path) {
			uni.navigateTo({
				url: path
			})
		},
		logOut() {
			uni.showLoading()
			this.$api.post(global.apiUrls.logout).then(res => {
				uni.hideLoading();
				if (res.data.code == 9100) {
					this.$store.commit('logout');
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}
			}).catch(err => {
				uni.hideLoading();
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.top {
	padding: 44rpx 60rpx;
	.head-img {
		width: 134rpx;
		height: 134rpx;
		border-radius: 50%;
		margin-right: 44rpx;
	}
	.username {
		font-size: 46rpx;
		font-weight: bold;
	}
}
.box {
	padding: 56rpx;
	.icon {
		width: 108rpx;
		height: 108rpx;
	}
}
.logout {
	padding: 24rpx 0;
	position: fixed;
	bottom: 110rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	.btn {
		width: 60%;
		height: 88rpx;
		border-radius: 16rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #0f68f0;
	}
}
</style>